<template>
  <div class="id2"></div>
</template>

<script>
import { postdata } from "../api/axios";
import * as echarts from "echarts";
export default {
  data() {
    return {
      pie: [],
    };
  },
  methods: {
    post2() {
      postdata().then(({ data }) => {
        let arr = data.data;
        let map = {},
          dest = [];
        for (let i = 0; i < arr.length; i++) {
          const ai = arr[i];
          if (!map[ai.regionName]) {
            dest.push({
              name: ai.regionName,
              value: ai.finalTotalAmount,
            });
            map[ai.regionName] = ai;
          } else {
            for (let j = 0; j < dest.length; j++) {
              const dj = dest[j];
              if (dj.name == ai.regionName) {
                dj.value += ai.finalTotalAmount;
                break;
              }
            }
          }
        }
        console.log(dest);
        this.pie = dest;
      });
    },
    ech2() {
      var myEcharts = echarts.init(document.querySelector(".id2"));
      var option = {
        title: {
          text: "任务2",
        },
        series: [
          {
            type: "pie",
            data: this.pie,
          },
        ],
      };
      myEcharts.setOption(option);
    },
  },
  mounted() {
    this.post2();
    setTimeout(() => {
      this.ech2();
    }, 5000);
  },
};
</script>

<style scoped>
.id2 {
  width: 100%;
  height: 34.375rem;
}
</style>